<template>
    <div class="c1">
        <div class="c2">
            <div class="c3">
                <h1>3.9</h1>
                <h3>综合评分</h3>
                <p>高于周边69.2%</p>
            </div>
            <div class="c4">
                <p>服务态度&nbsp;<img src="./img/star24_on@2x.png" alt=""><img src="./img/star24_on@2x.png" alt=""><img src="./img/star24_on@2x.png" alt=""><img src="./img/star24_on@2x.png" alt=""><img src="./img/star24_half@2x.png" alt=""><span>3.9</span></p>
                <p>服务态度&nbsp;<img src="./img/star24_on@2x.png" alt=""><img src="./img/star24_on@2x.png" alt=""><img src="./img/star24_on@2x.png" alt=""><img src="./img/star24_on@2x.png" alt=""><img src="./img/star24_half@2x.png" alt=""><span>4.0</span></p>
                <p>送达时间&nbsp;<span>44分钟</span></p>
            </div>
            
        </div>
        <div class="c5"></div>
        <div >
            <div class="c6">
                <button class="c7 white" @click="fun3">全部<span>{{this.haop+this.chap}}</span></button>
                <button class="c8" @click="fun1">满意<span>{{this.haop}}</span></button>
                <button class="bgGray" @click="fun2">不满意<span>{{this.chap}}</span></button>
            </div>
        </div>
        <div class="c9">只看有内容的评价</div>

        <div >
            <div v-for="item,index in this.arr" class="ovfh">
                <div class="fl">
                    <img class="c10" :src="item.avatar" alt="" >
                </div>
                <div class="fl">
                    <div>
                        <p>{{item.username}}</p>
                        <p>2016-07-13 20:33</p>
                    </div>
                    <p><img src="" alt=""><span></span></p>
                    <p>{{item.text}}</p>
                    <div>
                        <img src="" alt="">
                        <span v-for="ite,inde in item.recommend">{{ite}}</span>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script>
    export default{
        props: ["ratings"],
        data:function(){
            return{
                haop:0,
                chap:0,
                arr:[]
            }
        },
        mounted(){            
            for(let i=0;i<this.ratings.length;i++){
                this.arr.push(this.ratings[i])  
                if(this.ratings[i].rateType==0){
                    this.haop+=1
                }else{
                    this.chap+=1
                }
            }
            // console.log(this.haop)
        },
        methods:{
            fun1(){
                //点击满意隐藏0
                this.arr=[]
                for(let i=0;i<this.ratings.length;i++){
                    if(this.ratings[i].rateType==0){
                        this.arr.push(this.ratings[i])
                    }
                }
                // console.log( this.arr)
            },
            fun2(){
                //点击不满意隐藏1
                this.arr=[]
                for(let i=0;i<this.ratings.length;i++){
                    if(this.ratings[i].rateType==1){
                        this.arr.push(this.ratings[i])
                    }
                }
            },
            fun3(){
                //点击全部显示全部
                this.arr=[]
                for(let i=0;i<this.ratings.length;i++){                  
                    this.arr.push(this.ratings[i])                    
                }
            }
        }
    }
</script>

<style>
    .c2{
        /* width: 100%; */
        /* height: 2.5rem; */
        border-top: .1rem solid grey;
        border-bottom: .1rem solid grey;
        padding: 2.6rem 1.7rem 2.5rem 1.8rem;
        overflow: hidden;
    }
    .c3 h1{
        font-size: 2.4rem;
        color: orange;
        line-height: 2.8rem;
        margin-bottom: .6rem;
    }
    .c3 h3{
        font-size: 1.2rem;
        line-height: 1.2rem;
         margin-bottom: .6rem;
    }
    .c3 p{
        font-size: 1rem;
        color: grey;
        line-height: 1rem;
    }
    .c3{
        /* width: 8.9rem; */
        padding-right: 2.6rem;
        text-align: center;
        float: left;
        border-right: 1px solid gray;
    }
    .c4{
        /* width: 18.7rem; */
        /* height: 7.1rem; */
        margin-left: 2.4rem;
        float: left;
    }
    .c4 img{
        vertical-align: middle;
    }
    .c5{
        background-color: gainsboro;
        border-bottom: .1rem solid gray;
        height: 1.2rem;
    }
    .c6{
        height: 6.8rem;
        margin: 0 1.8rem;
        border-bottom: 1px solid gray;
        overflow: hidden;
        vertical-align: middle;
    }
    .c6 bottom{
        display: block;
        float: left;
        padding: 1.2rem .8rem;
        border: 0px; 
        margin: auto .25rem;       
    }
    .c7{
        background-color: cadetblue;
    }
    .c8{
        background-color: cornflowerblue;
    }
    .c9{
        border-bottom: .1rem solid gray;
        height: 5rem;
    }
    .c10{
        width: 2.8rem;
        height: 2.8rem;
    }
</style>